<style scoped>
.main {
  display: flex;
}
.sidebarTree {
  min-width: 250px;
  margin-top: 20px;
  border: 1px solid lightgray;
  z-index: 0;
  height: fit-content;
}
.resourcePanel {
  flex: 1;
}

.btnPanel {
  flex: 1;
}
.btnPanel button {
  margin-left: 20px;
}
.searchPanel {
  display: flex;
  float: right;
}
.ivu-table td,
.ivu-table th {
  height: 40px !important;
}
.el-cheack-symbol {
  height: 200px;
}
/* .container{
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: 200px 200px 200px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  text-align: center;
} */
.img_performence {
  vertical-align: middle;
}
.el-checkbox__inner {
  border-radius: 8px;
}
.project-input {
  margin-top: 20px;
  /*margin-bottom: 10px;*/
  /*margin-left: 4.16666667%;*/
  width: 400px;
}
.search-btn {
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 20px;
  /* font-size: 0.5rem; */
  width: 100px;
  background-color: rgba(21, 88, 145, 0.8);
  color: rgba(255, 255, 255, 1);
}
</style>
<!--Resources中心-->
<template>
  <Row>
    <Col span="23" offset="1">
      <h2 style="margin-top: 20px">公共资源</h2>
      <!-- <div>
        <el-input
          class="project-input"
          placeholder="输入关键字进行过滤"
        >
        </el-input>
        <i-button class="search-btn" @click="search()">搜索</i-button>

      </div> -->
      <div class="main" :style="{ height: contentHeight }">
        <div class="sidebarTree">
          <Menu theme="light" width="auto" :active-name="$route.name">
            <MenuGroup title="资源库">
              <MenuItem name="SymbolLibrary" to="SymbolLibrary">
                <span>专业知识库</span>
              </MenuItem>
              <MenuItem name="expertiseBase" to="expertiseBase">
                <span>专业题库</span>
              </MenuItem>
              <MenuItem name="materialLibrary" to="materialLibrary">
                <span>课程素材库</span>
              </MenuItem>
              <MenuItem name="moocCurriculum" to="moocCurriculum">
                <span>慕课资源库</span>
              </MenuItem>
              <MenuItem name="webLibrary" to="webLibrary">
                <span>网站资源库</span>
              </MenuItem>
              <MenuItem name="toolsCenter" to="toolsCenter">
                <span>应用工具库</span>
              </MenuItem>
              <MenuItem name="literatureResource" to="literatureResource">
                <span>文献资源库</span>
              </MenuItem>
            </MenuGroup>
          </Menu>
        </div>
        <div class="resourcePanel" style="margin-left: -20px; margin-top: -20px">
          <div class="resourcePanel">
            <Row style="height: 100%">
              <template>
                <Col span="24" offset="0">
                  <div class="container">
                    <router-view></router-view>
                  </div>
                </Col>
              </template>
            </Row>
          </div>
        </div>
      </div>
    </Col>
  </Row>
</template>
<script>
import SymbolLibrary from "./SymbolLibrary.vue";
import expertiseBase from "./expertiseBase.vue";
import webLibrary from "./webLibrary.vue";
import materialLibrary from "./materialLibrary.vue";
import moocCurriculum from "./moocCurriculum.vue";
import toolsCenter from "./toolsCenter.vue";
import literatureResource from "./literatureResource.vue";

export default {
  data() {
    return {
      scrollOps: {
        bar: {
          background: "#808695",
        },
      },
      tabPosition: "left",
      // 侧边栏的颜色主题
      menulist: [
        {
          id: 1,
          name: "符号库",
        },
        {
          id: 2,
          name: "素材库",
        },
        {
          id: 3,
          name: "慕课资源库",
        },
        {
          id: 4,
          name: "可视化工具",
        },
        {
          id: 5,
          name: "文献资源库",
        },
      ],
      resourceColumn: [
        {
          type: "index",
          maxWidth: 50,
          align: "center",
        },
        {
          title: "Name",
          key: "name",
          minWidth: 10,
          tooltip: true,
          sortable: true,
        },
        {
          title: "Type",
          key: "type",
          width: 100,
          sortable: true,
        },
        {
          title: "Size",
          key: "fileSize",
          width: 100,
          sortable: true,
        },
        {
          title: "Description",
          key: "description",
          minWidth: 30,
          tooltip: true,
        },
        {
          title: "Provider",
          key: "uploaderName",
          width: 150,
          tooltip: true,
          align: "center",
        },
        {
          title: "Upload time",
          key: "uploadTime",
          width: 150,
          sortable: true,
        },
        {
          title: "Action",
          slot: "action",
          width: 125,
          align: "center",
        },
      ],
      allResourceList: [],
      allSelectedList: [],
      showList: [],
      dataCount: 0,
      pageSize: 8,
      currentPage: 1,
      // 上传文件的模态框
      uploadModal: false,
      file: "",
      fileDescription: "",
      fileType: "data",
      contentHeight: "",
      panel: null,
    };
  },
  components: {
    SymbolLibrary,
    expertiseBase,
    materialLibrary,
    moocCurriculum,
    toolsCenter,
    literatureResource,
  },
  mounted() {
    this.initLayout();
    // this.readResource();加载资源
  },
  methods: {
    initLayout() {
      this.contentHeight = window.innerHeight - 170 + "px";
    },
  },
};
</script>
